<!DOCTYPE html>
<html>

<head>

    {include file="Public/header"}
    <link rel="stylesheet" type="text/css" href="__STATIC__/layout/css/plugins/webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/layout/css/demo/webuploader-demo.css">
    <style>
        .row {
            margin: 0;
        }

        .div_H {
            min-height: 50px;
        }

        .colorRed {
            color: red;
        }
    </style>

</head>

<body class="white-bg">
<div class="ibox">
    <div class="ibox-content">
        <div class="row  border-bottom white-bg" style=" margin-bottom:10px;">
            {if $data}
            <ul class="list-group">
                {volist name="data" id="row"}
                <li class="list-group-item">
                    <a class="badge badge-primary removeIt" data-id="{$row.id}">移除</a>
                    <a href="{$row.path}" target="_blank">{$row.file_name}</a></li>
                {/volist}
            </ul>
            {/if}

            <!--<div class="col-md-12 border_S border_L border_R div_H" style="text-align: center;">
            </div>
            <div class="col-md-12 border_S border_L border_R div_H" style="line-height: 50px">
                <span class="colorRed">如需上传文件，请点击展开按钮上传：</span>
                <button class="btn btn-primary">展开</button>
            </div>-->
            <div style="width: 98%;padding:20px 0 20px 2%;background: #fff">
                <div id="uploader" class="wu-example">
                    <!--用来存放文件信息-->
                    <div id="thelist" class="uploader-list"></div>
                    <div class="btns">
                        <div id="picker">选择文件</div>
                        <button id="ctlBtn" class="btn btn-default">开始上传</button>
                    </div>
                </div>
                <span>注：最多上传15个文件，每个文件小于50M,支持格式：</span><br>jpg,bnp,gif,png,jpeg,tif,raw,doc,docx,xls,xlsx,ppt,pptx,txt,pdf,rar,zip,mp4,avi,rmvb,rm,mid,3gp,AVI,3GP,,mpg,mp3,wma,wav
            </div>
            <form action="" id="add">
            <input type="hidden" name="attach" id="attach">
            <input type="hidden" name="remove" id="remove">
            </form>

        </div>
        <div class="row">
            <div class="col-xs-12 col-xs-offset-3">
                <button class="btn btn-primary" id="tijiao">确定</button>
            </div>

        </div>
    </div>
</div>


<!-- 全局js -->
{include file="Public/footer"}
<script src="__STATIC__/layout/js/plugins/layer/layer.min.js"></script>

<!-- 自定义js -->
<script src="__STATIC__/layout/js/content.js"></script>

<!-- 欢迎信息 -->
<script src="__STATIC__/layout/js/welcome.js"></script>

<!-- Web Uploader -->
<script type="text/javascript">
    // 添加全局站点信息
    var BASE_URL = '__STATIC__/layout/js/plugins/webuploader';
</script>
<script src="__STATIC__/layout/js/plugins/webuploader/webuploader.min.js"></script>
<script>
    $(function () {
        //移除附件
        $('.removeIt').on('click',function(){
            var id = $(this).data('id')
            id = $.trim(id) //删除前后空格
            var remove = $('#remove').val()
            remove = $.trim(remove)
            var remove = ''!= remove?(remove.split(',')):[];
            if(-1==$.inArray(id,remove,0))
                remove.push(id)
            remove = remove.join(',')
            $('#remove').val(remove)

            $(this).closest('li').remove()
        })
        $('#tijiao').on('click',function () {
            var attach = $('#attach').val()
            var remove = $('#remove').val()

            $.ajax({
                'type':'post',
                'url':'{:url("updateAttach",array("id"=>$id))}',
                'data':{attach:attach,remove:remove},
                'dataType':'json',
                'success':function (data) {
                    if(data.success){
                        swal({
                            title: data.msg,
                            type: "success"
                        },function(){
                            location.reload();
                        });

                    }else
                        swal({
                            title: data.msg,
                            type: "warning"
                        });
                }
            })
            return false
        })
    })
</script>
<script>
    // 文件上传
    jQuery(function () {
        var $ = jQuery,
            $list = $('#thelist'),
            $btn = $('#ctlBtn'),
            state = 'pending',
            uploader;

        var ids = [];
        uploader = WebUploader.create({

            // 不压缩image
            resize: false,

            // swf文件路径
            swf: BASE_URL + '/js/Uploader.swf',

            // 文件接收服务端。
            server: '{:url("upload/fileupload")}',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker'
        });

        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            $list.append('<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
                '</div>');
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo($li).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');

            $percent.css('width', percentage * 100 + '%');
        });

        uploader.on('uploadSuccess', function (file, response) {
            if(response.success)
                ids.push(response.id)
            $( '#'+file.id ).find('p.state').text(response.msg);
        });

        uploader.on('uploadError', function (file) {
            $('#' + file.id).find('p.state').text('上传出错');
        });

        uploader.on('uploadComplete', function (file) {
            $('#attach').val(ids.join(','))
            $('#' + file.id).find('.progress').fadeOut();
        });

        uploader.on('all', function (type) {
            if (type === 'startUpload') {
                state = 'uploading';
            } else if (type === 'stopUpload') {
                state = 'paused';
            } else if (type === 'uploadFinished') {
                state = 'done';
            }

            if (state === 'uploading') {
                $btn.text('暂停上传');
            } else {
                $btn.text('开始上传');
            }
        });

        $btn.on('click', function () {
            if (state === 'uploading') {
                uploader.stop();
            } else {
                uploader.upload();
            }
            return false
        });
    });
</script>
</body>

</html>